import * as echarts from "echarts";
import { useEffect, useRef, useState } from "react";
import { DatePicker } from 'antd'
import 'dayjs/locale/zh-cn';
import styles from "./index.module.scss"
import { visibwebcurren } from "@/apis/admin/echar"
const colors = ['red', 'green', 'yellow', 'skyblue']
let weekarr = [1, 2, 3, 4]
function formatdata(arr: any) {
    let resultarr: any = []
    weekarr.forEach((element) => {
        let found = arr.find((item: any) => {
            return item.week == element
        })

        if (!found) {
            resultarr.push({
                value: 0,
                itemStyle: {
                    color: colors[element]
                }
            })
        } else {
            resultarr.push({
                value: found.usercount,
                itemStyle: {
                    color: colors[element]
                }
            })
        }

    })
    return resultarr
}
const Echarts = ({ thems }: { thems: boolean }) => {

    const echartRef = useRef(null)
    const [current, setCurrent] = useState('')
    let echarObj: echarts.ECharts;
    const getData = async () => {
        let year = Number(current.split('-')[0])
        let month = Number(current.split('-')[1])
        console.log(current)
        if (!current) {
            const data = new Date(Date.now())
            year = data.getFullYear()
            month = data.getMonth() + 1
        }
        const result = await visibwebcurren(Number(year), Number(month))

        const Option = {
            title: {
                text: '用户:' + current,
                textStyle: {
                    color: thems ? "black" : 'white'
                }
            },
            tooltip: { trigger: 'axis' },
            legend: {
                textStyle: {
                    color: thems ? "black" : 'white'
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['第一周', '第二周', '第三周', '第四周'],
                axisLabel: {
                    show: true,
                    color: thems ? "black" : 'white'
                }

            },
            yAxis: {
                type: "value",
                axisLabel: {
                    color: thems ? "black" : 'white'
                }
            },
            series: [
                {
                    name: '注用户册数量',
                    type: 'line',
                    data: [{
                        value: 100,
                        itemStyle: {
                            color: 'red'
                        }
                    }, {
                        value: 40,
                        itemStyle: {
                            color: 'red'
                        }
                    }, {
                        value: 70,
                        itemStyle: {
                            color: 'red'
                        }
                    }, {
                        value: 80,
                        itemStyle: {
                            color: 'red'
                        }
                    }],
                    areaStyle: {}

                },

            ]
        };
        formatdata(result.data)

        Option.series[0].data = formatdata(result.data)
        echarObj.setOption(Option)
    }
    useEffect(() => {
        getData()


        echarObj = echarts.init(echartRef.current)

    }, [current, thems])
    const onChange = (_: any, dateString: any) => {
        echarObj.dispose()
        setCurrent(dateString)
    };
    return (
        <div style={{ width: "50%", display: "flex", flexDirection: "column" }}>
            <div>
                <DatePicker className={thems ? styles.datecolor : styles.datecolor2} placeholder="选择月份" onChange={onChange} picker="month" />
            </div>
            <div ref={echartRef} style={{ width: "100%", height: "250px" }}></div>

        </div>

    )
}

export default Echarts